<template>
  <div class="planeWrapper">
      <div class="tabWrapper">
        <tab :line-width="2" custom-bar-width="100px">
          <tab-item :selected="selected === index" v-for="(item, index) in tabStation" :key="index"  @on-item-click="selectTabEvery">{{item}}</tab-item>
        </tab>
      </div>
      <div class="exchangeStation" v-if="selected === 0">
        <exchange-station v-model="station" :stationList="stationList" :ticketType="1"></exchange-station>
      </div>
      <div class="exchangeStation" v-if="selected === 1">
        <exchange-station v-model="stationNation" :stationList="stationNationList" :ticketType="1"></exchange-station>
      </div>
      <div class="middleWrapper">
          <!-- 对于日期控件的处理 -->
          <div class="dateWrapper">
            <div class="nowDate" @click.stop="showCalendar = true">
              <p>{{departureDate}}</p>
            </div>
            <div class="addWrapper" @click.stop="showCalendar = true">
              <p><i class="fa fa-plus-circle" aria-hidden="true"></i> 添加日期</p>
            </div>
          </div>
          <div class="check">
            <check-icon :value.sync="carryChildren">携带儿童（2-12岁）</check-icon>
            <check-icon :value.sync="carryBaby">携带婴儿（14天-2岁）</check-icon>
          </div>
          <div class="attentionWrapper">
            <p><i class="fa fa-info-circle attentionIcon" aria-hidden="true"></i> 儿童预订说明</p>
          </div>
          <div class="buttonWrapper">
            <x-button type="primary" class="submit" @click.native="submitQuery">查询</x-button>
          </div>
      </div>

      <transition name="fade">
        <div class="calender-wrapper" @click="showCalendar = false" v-show="showCalendar">
          <div class="calendar-dropdown" @click.stop="() => {}">
            <calendar :zero="calendarOpt.zero" :events="calendarOpt.events" :lunar="calendarOpt.lunar" :value="calendarOpt.value" :begin="calendarOpt.begin" :end="calendarOpt.end" @select="calendarOpt.select"></calendar>
          </div>
        </div>
    </transition>
  </div>
</template>
<script>
import { Tab, TabItem, XButton, CheckIcon } from 'vux'
import ExchangeStation from '@/components/exchange-station/exchange-station'
import Calendar from '@/components/calendar/calendar.vue'
import axios from '@/api/axiosApi'
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      tabStation: ['国内', '国际/港澳台'],
      selected: 0,
      // 国内机票
      station: [{name: '贵阳'}, {name: '黎平'}],
      // 国际机票
      stationNation: [{name: '上海'}, {name: '新加坡'}],
      stationNationList: [],
      departureDate: this.moment().format('M月D日 dddd'),
      showCalendar: false,
      calendarOpt: {
        zero: true,
        value: this.moment().toArray().slice(0, 3), // 默认日期
        lunar: false, // 显示农历
        begin: this.moment().toArray().slice(0, 3),
        events: {'2018-5-9': '$408', '2018-5-10': '$460', '2018-5-11': '$500'},
        select: (value) => {
          if (this.showCalendar === false) return
          this.showCalendar = false
          this.calendarOpt.value = value
          this.departureDate = this.moment(value).format('M月D日 dddd')
        }
      },
      carryChildren: false,
      carryBaby: false
    }
  },
  computed: {
    ...mapGetters({
      stationList: 'planeStationList'
    })
  },
  created () {
    if (this.stationList.length === 0) {
      this._getPlaneStationList('', 300)
    }
  },
  components: {
    Tab, TabItem, ExchangeStation, Calendar, XButton, CheckIcon, axios
  },
  methods: {
    selectTabEvery (value) {
      this.selected = value
    },
    _getPlaneStationList (keyWords, pageSize = 10) {
      axios.get(this, '/v1/airCode', {
        keyWords,
        pageSize,
        pageNum: 1,
        belongCountry: '中国'
      }, (data) => {
        // 数据按照索引处理
        this.$store.commit('SET_PLANE_STATION_LIST', data)
      })
    },
    submitQuery () {
      this.$router.push('/planeTicket')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'

.planeWrapper {
  background-color #fff
  .exchangeStation {
    padding 15px
  }
}
.middleWrapper {
  .check {
    font-size $font-size-title
    padding 12px
    display flex
    justify-content space-between
    color #333
  }
  .dateWrapper {
    display flex
    justify-content space-between
    padding 15px
    border-bottom-style solid
    border-width:1px
    border-color: #E4E4E4
    .nowDate {
      p{
        font-size 18px
      }
    }
    .addWrapper {
      font-size 18px
      color $color-text-2
    }
  }
  .attentionWrapper {
    padding 0px 15px
    text-align right
    p {
      font-size $font-size-small
      color $color-text-2
    }
    .attentionIcon {
      color red
    }
  }
  .buttonWrapper {
    padding 0px 15px
    .submit {
      margin-top 20px
    }
  }
}
.calender-wrapper{
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  z-index 102
}
.calendar-dropdown
  position fixed
  left 150vw
  top 184px
  z-index 103
  transform translateX(-50%)
  padding 20px
  border 1px solid #eee
  border-radius 5px
  filter drop-shadow(2px 2px 12px #bfbfbf)
  background #fff
  &:before
    content ''
    display block
    position absolute
    top -16px
    left 20px
    width 0
    height 0
    border-left 15px solid transparent
    border-right 15px solid transparent
    border-bottom 16px solid #eee
  &:after
    content ''
    display block
    position absolute
    top -15px
    left 20px
    width 0
    height 0
    border-left 15px solid transparent
    border-right 15px solid transparent
    border-bottom 16px solid #fff
</style>
